<template>
  <div id="">
    <headerbox :headerTitle="'注册'" :hasBack="true"></headerbox>
    <ul class="formList">
      <li>
        <span>手机号</span>
        <input type="text" name="" v-model="phone" placeholder="请输入注册手机号">
      </li>
      <li>
        <span>密码</span>
        <input type="password" name="" v-model="pwd" placeholder="请设置密码">
      </li>
      <li>
        <span>验证码</span>
        <input type="text" name="" v-model="code" placeholder="请输入验证码">
        <button type="button" name="button" class="inlineButton" @click="registerCode" v-if="isCode">获取验证码</button>
        <button type="button" name="button" class="inlineButton" v-else>重新发送({{cTime}})</button>
      </li>
      <li>
        <span>邀请码</span>
        <input type="text" name="" v-model="parentCode" placeholder="邀请码(可选)">
      </li>
    </ul>
    <div class="fixedButtom">
      <button type="button" name="button" class="blockButton" @click="registerBtn">注册</button>
    </div>
  </div>
</template>
<script>
import { registerPost,registerCode } from '@/utils/ajaxRequest.js';
import { mobileTest } from '@/utils/util.js';
import {mapState,mapMutations} from 'vuex';
export default {
  name: "",
  data: () => ({
    phone:'',
    pwd:'',
    code:'',
    parentCode:'',
    cTime:60,
    isCode:true,
  }),
  methods: {
    ...mapMutations(['setToken']),
    // 获取验证码
    registerCode() {
      let self = this;
      let codeParam = {
        phone:self.phone
      }
      registerCode(codeParam).then(res=>{
        console.log(res);
        if(res) {
          self.toast(res.data.msg);
          self.isCode = false;
          let cTime = self.cTime;
          let timer = setInterval(()=>{
            cTime--;
            self.cTime = cTime;
            if (cTime==0) {
              self.isCode = true;
              clearInterval(timer);
            }
          },1000);
        }
      })
    },
    // 注册提交
    registerBtn() {
      let self = this;
      if(this.phone=='') {
        this.toast('请输入正确的手机号');
        return false;
      }else{
        if(!mobileTest(this.phone)){
          this.toast('请输入正确的手机号');
          return false;
        }
      }
      if(this.pwd=='') {
        this.toast('请设置密码');
        return false;
      }
      if(this.code=='') {
        this.toast('验证码不能为空');
        return false;
      }
      let registerParam = {
        phone: this.phone,
        pwd: this.pwd,
        code: this.code,
        parentCode: this.parentCode
      }
      registerPost(registerParam).then(res=>{
        if(res) {
          self.toast(res.data.msg);
          self.$router.go(-1);
        }
      }).catch(error=>{
        console.log(error);
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
